<!DOCTYPE HTML>
<html>
    <head>        
        <?php include 'views/content.php'; ?>

        <script type="text/javascript">
            $().ready(function () {
                // validate signup form on keyup and submit            
                $("#formLogin").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 5
                        },
                        password0: {
                            required: true,
                            minlength: 5
                        }
                    },
                    messages: {
                        username: {
                            required: "Por favor, ingresa el usuario",
                            minlength: "Tu usuario debe tener al menos 5 caracteres"
                        },
                        password0: {
                            required: "Por favor, ingresa tu clave",
                            minlength: "Tu clave debe tener al menos 5 caracteres"
                        }
                    }
                });
                
                $("#fecha").datepicker(OPTIONS_DATE_PICKER);
                $("#fecha").attr("readonly", "true");
                
                $("#formAgregar").validate({
                    rules: {
                        ci: {
                            required: true,
                            minlength: 5,
                            digits: true
                        },
                        nombre: {
                            required: true,
                            minlength: 2,
                            notEqualTo:  "#apellido"
                        },
                        apellido: {
                            required: true,
                            minlength: 2,
                            notEqualTo:  "#nombre"
                        },
                        email: {
                            email: true,
                            minlength: 2
                        },
                        phone: {
                            digits: true,
                            minlength: 5
                        },
                        sexo: {
                            required: true
                        },
                        contrato: {
                            required: true,
                            minlength: 2
                        },
                        fecha: {
                            required: true
                        },
                        password: {
                            required: true,
                            minlength: 5
                        },
                        repetir: {
                            required: true,
                            equalTo: "#password"
                        }
                    },
                    messages: {
                        ci: {
                            required: "Por favor, ingresa la cédula",
                            minlength: "La Cédula debe tener al menos 5 caracteres",
                            digits: "La cédula solo acepta dígitos númericos"
                        },
                        nombre: {
                            required: "Por favor, ingresa el nombre",
                            minlength: "El nombre debe tener al menos 2 caracteres",
                            notEqualTo: "El nombre no puede ser igual al apellido"
                        },
                        apellido: {
                            required: "Por favor, ingresa el apellido",
                            minlength: "El apellido debe tener al menos 2 caracteres",
                            notEqualTo: "El apellido no puede ser igual al nombre"
                        },
                        email: {
                            email: "Por favor, ingresa un correo valido. Ej. tucorreo@dominio.com",
                            minlength: "El correo debe tener al menos 2 caracteres"
                        },
                        phone: {
                            digits: "El teléfono solo acepta dígitos númericos",
                            minlength: "El telefono debe tener al menos 5 caracteres"
                        },
                        sexo: {
                            required: "El sexo es requerido"
                        },
                        fecha: {
                            required: "La fecha de nacimiento es requerida"
                        },
                        contrato: {
                            required: "Por favor, ingresa el número del contrato del cliente",
                            minlength: "El contrato debe tener al menos 2 caracteres"
                        },
                        password: {
                            required: "Por favor, ingresa la contraseña",
                            minlength: "La clave debe tener al menos 5 caracteres"
                        },
                        repetir: {
                            required: "Por favor, verifica la contraseña",
                            equalTo: "La verificación de contraseña no coincide"
                        }
                    }
                });
                
                $("#formAgregar").submit(function () {
                    if ($("#formAgregar").validate().form()) {                        
                        $("#id").val("0");
                        $("#idLogin").val("0");
                        $.ajax({
                            data:  $("#formAgregar").serialize(),
                            url:   '<?php echo $_SERVER['HELPER'] ?>?action=usuario&method=save&result=ajax',
                            type:  'post',
                            beforeSend: function () {
                            },
                            success:  function (data) {         
                                
                                var info = JSON.parse(data);
                                                        
                                alert(info.msj);
                                
                                if (info.estatus== AJAX_SUCCESSFUL){
                                    $("#formAgregar").reset();                    
                                }                                                                
                            }
                        });              
                    }
                    return false;
                });         
            });
            
        </script>
    </head>
    <body>      
        <header> <img alt="" title="Alcald&iacute;a de Plaza" src="images/header.png" width="100%" height="180"/> </header>
        <div id="menu-wrapper">
            <div id="menu">
                <h1><?php echo $_SESSION['msj'] ?></h1>
                <nav id="nav"> 
                    <a href="index.php">Inicio</a> 
                    <a href="contacto.php">Contactanos</a>
                    <a href="registro.php">Registrate</a>                          
                </nav>
            </div>
        </div>
        <div id="main">
            <div class="column-left">
                <form id="formLogin" name="formLogin" method="post" action="<?php echo $_SERVER['HELPER'] ?>?action=usuario&method=autenticate">
                    <h2>Inicia Sessión</h2>
                    Usuario:&nbsp;
                    <input type="text" id="username" name="username" size="15" maxlength="15" placeholder="Usuario" />
                    <br /><br />
                    Clave:&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="password" id="password0" name="password" size="15" maxlength="15" placeholder="Clave" />
                    <br/><br/>
                    <a href="clave.php">Recuperar Contrase&ntilde;a</a>
                    <br/><br/>
                    <footer class="controls"> 
                        <button type="reset" class="button" >Limpiar</button>
                        <button type="submit" class="button" >Entrar</button>
                    </footer>
                </form>
            </div>
            <div class="column-center">                        
                <h2>Datos de Registro</h2>
                <h4>Su usuario de sistema se conformara con su nacionalidad y cédula. Ej. V12345678</h4> 
                <form id="formAgregar" name="formAgregar" method="post" action="#">
                    <fieldset>
                        <legend><img alt=""  src="images/user_add.png" width="32" height="32" class="pointer"/></legend>
                        <table style="width: 100%;">
                            <tr>
                                <td>
                                    <label for="ci">C.I.:</label></td>
                                <td>
                                    <select id="nac" name="nac" class="text ui-widget-content ui-corner-all">
                                        <option value="V">V</option>
                                        <option value="E">E</option>
                                    </select>
                                    <input type="text" name="ci" id="ci" class="text ui-widget-content ui-corner-all" style="width: 98px;" maxlength="9" placeholder="Ej. 123456" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name">Nombre:</label></td>
                                <td>
                                    <input type="text" name="nombre" id="nombre" class="text ui-widget-content ui-corner-all" maxlength="40" placeholder="Nombre" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="apellido">Apellido</label></td>
                                <td>
                                    <input type="text" name="apellido" id="apellido" value="" class="text ui-widget-content ui-corner-all" maxlength="40" placeholder="Apellido" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="email">Correo</label></td>
                                <td>
                                    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" maxlength="40" placeholder="Ej. tucorreo@dominio.com" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="phone">Telefono</label></td>
                                <td>
                                    <input type="text" name="phone" id="phone" value="" class="text ui-widget-content ui-corner-all" maxlength="15" placeholder="Ej. 02121234567" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="sexo">Sexo:</label>
                                </td>
                                <td>
                                    <select id="sexo" name="sexo" class="text ui-widget-content ui-corner-all">
                                        <option value="">Seleccione</option>
                                        <option value="F">Masculino</option>
                                        <option value="M">Femenino</option>
                                    </select>                                
                                </td>
                            </tr>                        
                            <tr>
                                <td>
                                    <label for="fecha">Fecha de Nacimiento:</label>
                                </td>
                                <td>
                                    <input type="text" name="fecha" id="fecha" value="" class="text ui-widget-content ui-corner-all" maxlength="15" placeholder="Ej. 00/00/0000" />                              
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="contrato">Contrato:</label></td>
                                <td>
                                    <input type="text" name="contrato" id="contrato" class="text ui-widget-content ui-corner-all" maxlength="40" placeholder="Nro de contrato" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="password" class="clave-content">Clave</label></td>
                                <td>
                                    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all clave-content" maxlength="10" placeholder="Contraseña" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="repetir" class="clave-content">Rep. Clave</label></td>
                                <td>
                                    <input type="password" name="repetir" id="repetir" value="" class="text ui-widget-content ui-corner-all clave-content" maxlength="10" placeholder="Repetir Contraseña" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <button type="reset" class="button" >Limpiar</button>                        
                                </td>
                                <td>
                                    <button type="submit" class="button" >Registrar</button>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                    <input type="hidden" name="id" id="id" />                              
                    <input type="hidden" name="idLogin" id="idLogin" />
                </form>
                <br/><br/>
            </div>
            <div class="column-right">                        
                <br/>
            </div>                                    
        </div>
        <?php include 'views/footer.php'; ?>      
    </body>
</html>